<template>
	<view class="news-container">
		<!-- 顶部标题栏 -->
		<view class="header" :style="{ paddingTop: safeDistance + 'px' }">
			<view class="header-content">
				<text class="header-title">觉醒动态</text>
				<text class="header-subtitle">追踪全球觉醒事件的最新动态</text>
			</view>
		</view>

		<!-- 动态列表 -->
		<scroll-view class="news-scroll" scroll-y enable-back-to-top>
			<view class="news-list">
				<view 
					v-for="news in newsList" 
					:key="news.id" 
					class="news-card"
					@click="handleNewsClick(news)"
				>
					<!-- 新闻图片 -->
					<view class="news-image-wrapper">
						<image 
							class="news-image" 
							:src="news.image" 
							mode="aspectFill"
							@error="handleImageError"
						/>
						<view class="news-badge" :class="'badge-' + news.type">
							<text class="badge-text">{{ getNewsTypeText(news.type) }}</text>
						</view>
					</view>

					<!-- 新闻内容 -->
					<view class="news-content">
						<text class="news-title">{{ news.title }}</text>
						<text class="news-summary">{{ news.summary }}</text>
						<view class="news-meta">
							<text class="news-time">{{ news.time }}</text>
							<text class="news-source">{{ news.source }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 底部占位 -->
			<view class="bottom-placeholder"></view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue';
	import { getNewsList } from '@/data/news';
	import type { News } from '@/types/news';

	// 动态列表
	const newsList = ref<News[]>(getNewsList());

	// 安全距离（顶部内边距 = 安全区域 + 基础间距）
	const safeDistance = computed(() => {
		const systemInfo = uni.getSystemInfoSync();
		const safeAreaTop = systemInfo.safeAreaInsets?.top || 0;
		return safeAreaTop + 20;
	});

	// 获取新闻类型文本
	const getNewsTypeText = (type: string): string => {
		const typeMap: Record<string, string> = {
			'awakening': '觉醒事件',
			'ability': '能力发现',
			'news': '新闻动态',
			'research': '研究进展'
		};
		return typeMap[type] || '动态';
	};

	// 点击新闻卡片
	const handleNewsClick = (news: News) => {
		uni.navigateTo({
			url: `/pages/news/detail?id=${news.id}`
		});
	};

	// 图片加载错误处理
	const handleImageError = (e: any) => {
		console.log('图片加载失败:', e);
	};
</script>

<style lang="scss" scoped>
	.news-container {
		height: 100vh;
		background: linear-gradient(180deg, #f5f7fa 0%, #e9ecef 100%);
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	/**
	 * 顶部标题栏
	 */
	.header {
		flex-shrink: 0;
		width: 100%;
		padding-left: 32rpx;
		padding-right: 32rpx;
		padding-bottom: 32rpx;
		background: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
		position: relative;
		z-index: 10;
		box-sizing: border-box;
	}

	.header-content {
		flex: 1;
	}

	.header-title {
		font-size: 48rpx;
		font-weight: 900;
		color: #1a202c;
		display: block;
		margin-bottom: 8rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}

	.header-subtitle {
		font-size: 26rpx;
		color: #64748b;
		font-weight: 500;
	}

	/**
	 * 动态列表滚动区域
	 */
	.news-scroll {
		flex: 1;
		padding: 24rpx 24rpx 0;
		width: 100%;
		box-sizing: border-box;
		overflow-y: auto;
		height: 0;
	}

	.news-list {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}

	/**
	 * 动态卡片
	 */
	.news-card {
		background: white;
		border-radius: 24rpx;
		overflow: hidden;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

		&:active {
			transform: scale(0.98);
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
		}
	}

	.news-image-wrapper {
		width: 100%;
		height: 360rpx;
		position: relative;
		overflow: hidden;
	}

	.news-image {
		width: 100%;
		height: 100%;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}

	.news-badge {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		backdrop-filter: blur(10rpx);
		border: 2rpx solid rgba(255, 255, 255, 0.3);
	}

	.badge-awakening {
		background: rgba(245, 158, 11, 0.8);
	}

	.badge-ability {
		background: rgba(59, 130, 246, 0.8);
	}

	.badge-news {
		background: rgba(139, 92, 246, 0.8);
	}

	.badge-research {
		background: rgba(16, 185, 129, 0.8);
	}

	.badge-text {
		font-size: 22rpx;
		color: white;
		font-weight: 700;
	}

	.news-content {
		padding: 24rpx;
	}

	.news-title {
		font-size: 32rpx;
		font-weight: 800;
		color: #1a202c;
		line-height: 1.4;
		display: block;
		margin-bottom: 16rpx;
	}

	.news-summary {
		font-size: 26rpx;
		color: #64748b;
		line-height: 1.6;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 16rpx;
	}

	.news-meta {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 16rpx;
		border-top: 2rpx solid #f1f5f9;
	}

	.news-time {
		font-size: 22rpx;
		color: #94a3b8;
		font-weight: 500;
	}

	.news-source {
		font-size: 22rpx;
		color: #667eea;
		font-weight: 600;
	}

	/**
	 * 底部占位
	 */
	.bottom-placeholder {
		height: 120rpx;
	}
</style>

